<template>
  <div class="category">
    <el-row :gutter="20">
      <el-col :span="16">
        <!--分类选项头部-->
        <div class="category-header">
          <!--状态-->
          <div class="selections">
            <div class="typeName">状态</div>
            <ul class="selection-item">
              <li class="item" v-for="(item,i) in status">
                <el-link @click="changeStatus(i)" :class="activeStatus===i?'el-link--primary':''" :underline="false"
                         v-text="item">状态的子项
                </el-link>
              </li>
            </ul>
          </div>
          <!--类目-->
          <div class="selections">
            <div class="typeName">类目</div>
            <ul class="selection-item">
              <li class="item" v-for="(item,i) in showType">
                <el-link @click="changeCategory(i)" :class="activeCategory===i?'el-link--primary':''" :underline="false"
                         v-text="item">状态的子项
                </el-link>
              </li>
            </ul>
          </div>
          <!--地区-->
          <div class="selections">
            <div class="typeName">地区</div>
            <ul class="selection-item">
              <li class="item" v-for="(item,i) in area">
                <el-link @click="changeArea(i)" :class="activeArea===i?'el-link--primary':''" :underline="false"
                         v-text="item">状态的子项
                </el-link>
              </li>
            </ul>
          </div>
          <!--年代-->
          <!--          <div class="selections">-->
          <!--            <div class="typeName">年代</div>-->
          <!--            <ul class="selection-item">-->
          <!--              <li class="item" v-for="(item,i) in times">-->
          <!--                <el-link :class="activeTimes===i?'el-link&#45;&#45;primary':''" :underline="false" v-text="item">状态的子项</el-link>-->
          <!--              </li>-->
          <!--            </ul>-->
          <!--          </div>-->
        </div>
        <!--分类查找结果-->
        <div class="category-result" ref="categoryResult">
          <el-row :gutter="20" v-loading="dramaLoading">
            <el-col :span="4" v-for="item in dramas" :key="item.id">
              <resource-cover :drama="item"></resource-cover>
            </el-col>
            <el-empty v-if="dramas == null || dramas.length === 0" description="暂无资源"></el-empty>
          </el-row>
        </div>
        <!--分页按钮-->
        <div class="pagination">
          <el-pagination
              background
              :current-page.sync="currentPage"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total">
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="8">
        <hot-show :dramas="popularDramas"></hot-show>
        <!--        <div class="hot-show">-->
        <!--          <h3>热播视频</h3>-->
        <!--          <template v-for="i in 10">-->
        <!--            <resource-cover-hor></resource-cover-hor>-->
        <!--          </template>-->
        <!--        </div>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ResourceCoverHor from "../../components/ResourceCoverHor";
import ResourceCover from "../../components/ResourceCover";
import HotShow from "../../components/HotShow";
import {popularDrama, queryDrama} from "@/api/drama";
import {scrollTo} from "@/utils/scroll-to";

export default {
  name: "Category",
  components: {HotShow, ResourceCover, ResourceCoverHor},
  async created() {
    await this.getPopular()
    this.queryObj()
  },
  data() {
    return {
      names: ['状态', '类目', '地区', '年代'],
      status: ['全部', '连载', '完结', '未开播'],
      showType: ['全部', '电视剧', '电影', '动漫', '综艺'],
      area: ['全部', '中国', '美国', '日本', '韩国', '中国香港', '中国台湾', '英国', '泰国'],
      // times: ['全部', '2021', '2020', '2019', '2018', '90年代', '更早'],
      activeName: 0,
      activeStatus: 0,
      activeCategory: 0,
      activeArea: 0,
      activeTimes: 0,
      currentPage: 1,
      pageSize: 18,
      totalPage: 0,
      total: 0,
      dramaLoading: true,
      dramas: [],
      popularDramas: []
    }
  },
  methods: {
    handleCurrentChange(current) {
      this.currentPage = current
      this.queryObj()
    },
    changeStatus(index) {
      this.activeStatus = index;
      this.currentPage = 1;
      this.queryObj()
    },
    changeCategory(index) {
      this.activeCategory = index;
      this.currentPage = 1;
      this.queryObj()
    },
    changeArea(index) {
      this.activeArea = index
      this.currentPage = 1;
      this.queryObj()
    },
    statusDict(index) {
      switch (index) {
        case 0:
          return '';
        case 1:
          return 0;
        case 2:
          return 1;
        case 3:
          return -1;
      }
    },
    categoryDict(index) {
      let categoryDict = ['', '2', '1', '3', '4'];
      return categoryDict[index]
    },
    areaDict(index) {
      if (index === 0)
        return '';
      return this.area[index];
    },
    async getPopular() {
      await popularDrama().then(res => {
        this.popularDramas = res.data.data;
      })
    },

    queryObj() {
      console.log('abcd')
      scrollTo(0,800)
      this.dramaLoading = true
      const status = this.statusDict(this.activeStatus);
      const category = this.categoryDict(this.activeCategory);
      const area = this.areaDict(this.activeArea);
      const obj = {
        status: status,
        category: category,
        area: area,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }
      queryDrama(obj).then(res => {
        setTimeout(() => {
          this.dramaLoading = false
        }, 300)
        this.dramas = res.data.data.list
        this.totalPage = res.data.data.totalPage
        this.total = res.data.data.total
        // this.$refs.categoryResult.scrollTo(0, 0)
      })
    }
  }
}
</script>

<style scoped>
.category {
  /*height: 100vh;*/
}

.category-header {
  background-color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.typeName {
  font-size: 15px;
  color: #888;
  display: inline-block;
  padding: 0 15px;
  cursor: default;
}

.selections {
  line-height: 40px;
}

.selection-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
}

ul.selection-item {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.selection-item li {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  height: 40px;
}

.selection-item .item {
  margin: 0 10px;
  font-size: 15px;
  min-width: 40px;
}

.selection-item .item a {
  font-size: 15px;
}

.hot-show {
  background-color: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.hot-show h3 {
  margin: 0;
  font-size: 15px;
  padding: 10px;
  background-color: #fbfbfb;
  border-bottom: 1px solid #eaeaea;
}

.category-result {
  border-radius: 5px;
  margin: 20px 0;
  padding: 15px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

>>> .el-pagination.is-background .el-pager .number {
  background-color: #FFFFFF;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
